<template>
  <div class="app">
    <h1>{{ msg }},学生姓名是:{{ studentName }}</h1>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (第一种方式)-->
    <!-- <Student v-on:atshang="getStudentName"></Student> -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 （第二种方式ref）-->

    <!-- 原生事件名click也会被当成自定义事件，所以要加上.native修饰符才会被当做原生事件 -->
    <Student ref="student" @demo="mq" @click.native="show" />

    <hr />
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";

export default {
  name: "App",
  components: {
    Student,
    School,
  },
  data() {
    return {
      msg: "你好啊",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("app收到了学校名", name);
    },
    getStudentName(value, x, y, z) {
      console.log("app收到了学生姓名", value, x, y, z);
      this.studentName = value;
    },
    mq() {
      console.log("demo事件被触发了");
    },
    show() {
      alert(111);
    },
  },
  mounted() {
    this.$refs.student.$on("atshang", this.getStudentName);
    // this.$refs.student.$once("atshang", this.getStudentName);//触发一次
  },
};
</script>
<style>
.app {
  background-color: gray;
  padding: 5px;
}
</style>